@page "/maps/osm-navigation"

@using Syncfusion.Blazor.Maps

@inherits SampleBaseComponent;

<SampleDescription>
    <p> This sample illustrates the flight route from Los Angeles to Mexico City using navigation lines in the OpenStreetMap.</p>
</SampleDescription>
<ActionDescription>
    <p>   More information about OpenStreetmaps can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/maps/providers/openstreetmap'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfMaps>
        <MapsTitleSettings Text="Flight route from Los Angeles to Mexico city">
            <MapsTitleTextStyle Size="16px" />
        </MapsTitleSettings>
        <MapsZoomSettings Enable="false" ZoomFactor="5" />
        <MapsCenterPosition Latitude="27.0902" Longitude="-105.7129" />
        <MapsLayers>
            <MapsLayer LayerType="ShapeLayerType.OSM" TValue="string">
                <MapsNavigationLines>
                    <MapsNavigationLine Visible="true" Width="8" Angle="-0.05" Color="#00ace6"
                                        Latitude="@naviagtionLineOne" Longitude="@naviagtionLineTwo" />
                </MapsNavigationLines>
                <MapsMarkerSettings>
                    <MapsMarker Visible="true" Shape="MarkerType.Circle" Fill="#FFFFFF" Height="20" Width="20" DataSource="@AirportLocation" TValue="MarkerLocation" AnimationDuration="0">
                        <MapsMarkerBorder Width="1" Color="#000000" />
                        <MapsMarkerTooltipSettings Visible="true" ValuePath="Name" />
                    </MapsMarker>
                    <MapsMarker Visible="true" DataSource="@AirportDistance" TValue="MarkerLocation">
                        <MarkerTemplate>
                            @{
                                <div>
                                    <img class="markerTemplate" src="images/maps/map-tooltip.svg" />
                                </div>
                            }
                        </MarkerTemplate>
                    </MapsMarker>
                    <MapsMarker Visible="true" DataSource="@LosAngelsLocation" TValue="MarkerLocation">
                        <MarkerTemplate>
                            @{
                                <div>
                                    <div style="text-align: right; font-weight:500; font-size: 13px;">
                                        <b>Los Angeles<br />International Airport</b>
                                    </div>
                                </div>
                            }
                        </MarkerTemplate>
                    </MapsMarker>
                    <MapsMarker Visible="true" DataSource="@MexicoLocation" TValue="MarkerLocation">
                        <MarkerTemplate>
                            @{
                                <div>
                                    <div style="text-align: right; font-weight:500; font-size: 13px;"><b>Mexico</b></div>
                                </div>
                            }
                        </MarkerTemplate>
                    </MapsMarker>
                    <MapsMarker Visible="true" DataSource="@MexicoLocationShape" TValue="MarkerLocation">
                        <MarkerTemplate>
                            @{
                                <div>
                                    <img src="images/maps/group.svg" style="height:30px;width:20px;" />
                                </div>
                            }
                        </MarkerTemplate>
                    </MapsMarker>
                    <MapsMarker Visible="true" DataSource="@MexicoLocations" TValue="MarkerLocation">
                        <ChildContent>
                            <MapsMarkerTooltipSettings Visible="true" ValuePath="Name"></MapsMarkerTooltipSettings>
                        </ChildContent>
                        <MarkerTemplate>
                            @{
                                <div style="margin-top:-10px;">
                                    <img src="images/maps/ballon.png" style="height:30px;width:20px;" />
                                </div>
                            }
                        </MarkerTemplate>
                    </MapsMarker>
                </MapsMarkerSettings>
            </MapsLayer>
        </MapsLayers>
    </SfMaps>
    <div class="urllink">
        <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>
    </div>
    <br />
    <div class="urllink">
        Source:
        <a href="https://www.google.co.in/maps/dir/Los+Angeles,+CA,+USA/Mexico+City,+Mexico/26.3645122,-117.6940069,5z/data=!4m14!4m13!1m5!1m1!1s0x80c2c75ddc27da13:0xe22fdf6f254608f4!2m2!1d-118.2436849!2d34.0522342!1m5!1m1!1s0x85ce0036b1352927:0xdefd9e4ee8d18a5b!2m2!1d-99.1013498!2d19.2464696!3e4?hl=en" target="_blank">www.google.co.in/maps</a>
    </div>
</div>

@code  {
    public class MarkerLocation
    {
        public double Latitude { get; set; }
        public double Longitude { get; set; }
        public string Name { get; set; }
    };
    public double[] naviagtionLineOne = new double[] { 23.6445, 34.0522 };
    public double[] naviagtionLineTwo = new double[] { -102.832, -118.2437 };
    public List<MarkerLocation> AirportLocation = new List<MarkerLocation> {
        new MarkerLocation { Latitude=34.0522, Longitude=-118.2437, Name="Los Angeles International Airport" }
    };
    public List<MarkerLocation> MexicoLocationShape = new List<MarkerLocation> {
        new MarkerLocation { Latitude=23.6445, Longitude=-102.832, Name="Mexico" },
    };
    public List<MarkerLocation> AirportDistance = new List<MarkerLocation> {
        new MarkerLocation { Latitude=27.5, Longitude=-111.200, Name="tooltip" },
    };
    public List<MarkerLocation> LosAngelsLocation = new List<MarkerLocation> {
        new MarkerLocation { Latitude=35.7000, Longitude=-122.5000, Name="Los Angeles City" },
    };
    public List<MarkerLocation> MexicoLocation = new List<MarkerLocation> {
       new MarkerLocation { Latitude=23.5005, Longitude=-101.200, Name="Mexico City" },
    };
    public List<MarkerLocation> MexicoLocations = new List<MarkerLocation> {
        new MarkerLocation { Latitude=24.0005, Longitude=-102.832, Name="Mexico City" },
    };
}